<template>
  <div>
    <label-order-alert v-if="data.labelOrder && data.labelOrder.status !== 2"></label-order-alert>

    <el-card class="header-card">
      <div class="item">
        <p>{{$t('table.store')}}：{{data.accountName}}</p>
        <p>{{$t('table.送仓单号')}}：{{ data.workNo }}</p>
        <p v-if="data.labelOrder">{{$t('table.贴标单号')}}：{{data.labelOrder.labelNo}}</p>
        <p>{{$t('table.warehouse')}}：{{data.warehouseName}}</p>
        <p>{{$t('middle.送仓方式')}}：{{getMiddleSendTypeStr(data.sendType)}}</p>
        <p class="">{{$t('table.工单状态')}}：{{ getMiddleStatus(data.status,data.cancel) }}</p>
        <p class="" v-if="data.labelOrder">{{$t('table.贴标状态')}}：{{ getLabelStatusStr(data.labelOrder.status)}}</p>
        <p>
          <span>{{$t('table.createTime2')}}：{{ data.createTime }}</span>
          <span class="mgl20" v-if="data.pickedTime">{{$t('table.拣货时间')}}：{{ data.pickedTime }}</span>
          <span class="mgl20" v-if="data.sendTime">{{$t('table.送仓时间')}}：{{ data.sendTime }}</span>
          <span class="mgl20" v-if="data.cancelTime">{{$t('table.重新入库时间')}}：{{ data.cancelTime }}</span>
        </p>
        <p>
          <span>{{$t('table.箱子数量')}}：</span>
          <span>{{data.boxNum}}</span>
          <span class="mgl20">{{$t('table.SKU种数')}}：</span>
          <span>
            <template v-if="data.status >= 2">
              {{ data.rlSkuNum }}
            </template>
            <template v-else>
              {{ data.exSkuNum }}
            </template>
          </span>
          <span class="mgl20">{{$t('table.商品总数量')}}：</span>
          <span>
            <template v-if="data.status >= 2">
              {{ data.rlGoodsNum }}
            </template>
            <template v-else>
              {{ data.exGoodsNum }}
            </template>
          </span>
        </p>
       <!-- <p>
          <span>
            {{$t('table.送仓费用（元）')}}:
            <span class="font-red" v-if="data.returnFee === 1">
              {{ data.transfer2warehouse }}（{{$t('order.Returned')}}）
            </span>
            <span v-else>
            {{ data.transfer2warehouse }}
            </span>
          </span>
          <template v-if="data.sendType === 2">
            <span class="mgl20">
              {{$t('table.包车费用（元）')}}：
            </span>
            <template v-if="data.returnCarFee === 1">
              <span class="font-red">{{data.charteredCarFee}}（{{$t('order.Returned')}}）</span>
            </template>
            <template v-else>
              <span>{{data.charteredCarFee}}</span>
            </template>

          </template>
          <template v-if="data.labelOrder">
            <span class="mgl20">{{$t('table.贴SKU标费用（元）')}}：
              <template v-if="data.labelOrder.status === 2">
                <template v-if="data.labelOrder.returnFee === 1">
                  <span class="font-red">{{ data.labelOrder.rlTotalLabelFee }} （{{$t('order.Returned')}}）</span>
                </template>
                <template v-else>
                  {{ data.labelOrder.rlTotalLabelFee }}
                </template>
              </template>
              <template v-else>
                {{ data.labelOrder.exTotalLabelFee }}
              </template>
            </span>
          </template>
          <span class="mgl20">
            {{$t('table.贴外箱标费用（元）')}}:
            <span class="font-red" v-if="data.returnBoxFee === 1">
              {{ data.boxLabelFee }}（{{$t('order.Returned')}}）
            </span>
            <span v-else>
              {{ data.boxLabelFee }}
            </span>
          </span>

        </p>
        <p v-if="data.status < 2">
          {{$t('table.预计总费用（元）')}}：{{data.exTotalFee}}
        </p>
        <p v-else>
          {{$t('table.总费用（元）')}}：{{data.rlTotalFee}}
        </p> -->
      </div>
      <div class="button">
        <div v-if="data.labelOrder">
          <el-button type="primary" @click="jumpLabelOrderInfo(data.labelOrder.id, true)">{{$t('labelOrder.贴标工单')}}</el-button>
        </div>
      </div>
    </el-card>
    <div class="mgt20">
       <h4>{{ $t('middle.费用信息') }}</h4>
        <el-table
             :data="exFee"
             border
             style="width: 100%">
             <el-table-column
               prop="exTransferFee"
               :label="$t('table.送仓费用（元）')"
               min-width="180"
               align="center">
               <template >
                 <span class="font-green" v-if="data.returnFee === 1">
                   {{ data.transfer2warehouse }}（{{$t('order.Returned')}}）
                 </span>
                 <span v-else>
                 {{ data.transfer2warehouse }}
                 </span>
               </template>
             </el-table-column>
             <el-table-column
               prop="exTotalLabelFee"
                :label="$t('table.包车费用（元）')"
               min-width="180"
               align="center">

                <template v-if="data.returnCarFee === 1">
                  <span class="font-green">{{data.charteredCarFee}} （{{$t('order.Returned')}}）</span>
                </template>
                <template v-else>
                  <span>{{data.charteredCarFee}}</span>
                </template>

             </el-table-column>
             <el-table-column
               prop="exTotalFee"
              :label="$t('table.贴SKU标费用（元）')"
              min-width="180"
              align="center" v-if="data.labelOrder">
           <template v-if="data.labelOrder.status === 2">
              <template v-if="data.labelOrder.returnFee === 1">
                <span class="font-red">{{ data.labelOrder.rlTotalLabelFee }} （{{$t('order.Returned')}}）</span>
              </template>
              <template v-else>
                {{ data.labelOrder.rlTotalLabelFee }}
              </template>
            </template>
            <template v-else>
              {{ data.labelOrder.exTotalLabelFee }}
            </template>
             </el-table-column>
             <el-table-column
               prop="exTotalFee"
              :label="$t('table.贴外箱标费用（元）')"
              min-width="180"
              align="center">
             <template >
              <span class="font-green" v-if="data.returnBoxFee === 1">
                  {{ data.boxLabelFee }}（{{$t('order.Returned')}}）
              </span>
              <span v-else>
                {{ data.boxLabelFee }}
              </span>
             </template>
             </el-table-column>

             <el-table-column
               prop="exTotalFee"
              :label="$t('table.总费用（元）')"
              min-width="180"
              align="center">
             <template >
              <p v-if="data.status < 2">
               {{data.exTotalFee}}
              </p>
              <p v-else>
               {{data.rlTotalFee}}
              </p>
             </template>
             </el-table-column>
           </el-table>
    </div>

    <div>
   <!--   <div v-if="straightGoods.length > 0">
        <h4>{{$t('middle.无需调货贴标商品详细情况')}}：</h4>
        <el-table
          :data="straightGoods"
          row-key="id"
          border
          style="width: 1600px"
        >
          <el-table-column
            :label="$t('table.productCover')"
            align="center"
            width="120"
            fixed="left"
          >
            <template slot-scope="{row}">
              <div class="img-box img-one">
                <img :src="row.image" alt="">
              </div>
            </template>
          </el-table-column>
          <el-table-column
            :label="$t('table.title')"
            align="left"
            min-width="300"
          >
            <template slot-scope="{row}">
              {{row.title}}
              <div class="goods-SKU-info">
                  <span
                    v-for="attr in row.attributes"
                    :key="attr.name"
                    class="attr"
                  >
                    {{attr.name}} : {{attr.value}}
                    <span class="attr-link"> | </span>
                  </span>
              </div>
            </template>
          </el-table-column>
          <el-table-column
            :label="$t('table.ListingIDAndSKU')"
            align="left"
            min-width="300"
          >
            <template slot-scope="{row}">
              {{row.goodsId}}{{row.sku ? `(${row.sku})` : ''}}
            </template>
          </el-table-column>
          <m-l-code-column></m-l-code-column>

          <el-table-column
            prop="inventoryLocation"
            align="center"
            :label="$t('table.inventoryLocation.存放库位')"
            min-width="160"
          >
            <template v-slot="{row}">
              <template v-if="row.inventoryLocationStr === ''">
                -
              </template>
              <template v-else>
                {{row.inventoryLocationStr}}
              </template>
            </template>
          </el-table-column>

          <el-table-column
            :label="$t('table.预计从中转送仓调出')"
            align="center"
            width="200"
            prop="boxInfo"
          >
            <template v-slot="{row}">
              <div
                v-for="(item,index) in row.boxInfo"
                :key="index"
              >
                {{$t('table.num/箱',{num: item.goodsNumInBox})}} × {{item.editNum}}
              </div>
            </template>
          </el-table-column>
          <el-table-column
            :label="$t('table.预计中转送仓数量')"
            align="center"
            width="200"
            prop="exGoodsNum"
          >
          </el-table-column>
          <el-table-column
            :label="$t('table.实际中转送仓数量')"
            align="center"
            width="200"
            prop="rlGoodsNum"
            v-if="!data.labelOrder || data.labelOrder.status === 2"
          >
            <template v-slot="{row}">
              <template v-if="data.status !== 1">
                <span :class="[row.rlGoodsNum !== row.exGoodsNum ? 'font-red' : '']">{{row.rlGoodsNum}}</span>
              </template>
              <template v-else>
                <template v-if="!data.labelOrder || data.labelOrder.status === 2">
                  <el-input-number
                    v-model="row.rlGoodsNum"
                    :placeholder="$t('common.pleaseFillIn')"
                    :min="0"
                    :precision="0"
                  ></el-input-number>
                </template>
                <template v-else>
                  -
                </template>

              </template>
            </template>
          </el-table-column>
          <template v-if="data.status === 1 && (!data.labelOrder || data.labelOrder.status === 2)">
            <el-table-column
              :label="$t('table.operate')"
              align="center"
              width="100"
            >
              <template v-slot="{row}">
                <el-button :type="row.save ? 'warning' : 'primary'" @click="saveMiddleGoods(row)">
                  {{ $t('common.save') }}
                </el-button>
              </template>
            </el-table-column>
          </template>


        </el-table>
      </div> -->

      <div v-if="GoodsList.length > 0">
        <h4>送仓商品详情：</h4>
        <el-table
          :data="GoodsList"
          row-key="id"
          border
          :span-method="objectSpanMethod1"
        >
          <el-table-column
            :label="$t('table.productCover')"
            align="center"
            width="120"
            fixed="left"
            prop="image"
          >
            <template slot-scope="{row}">
              <div class="img-box img-one">
                <img :src="row.image" alt="">
              </div>
            </template>
          </el-table-column>
          <el-table-column
            :label="$t('table.title')"
            align="left"
            min-width="300"
            prop="title"
          >
            <template slot-scope="{row}">
              {{row.title}}
              <div class="goods-SKU-info">
                  <span
                    v-for="attr in row.attributes"
                    :key="attr.name"
                    class="attr"
                  >
                    {{attr.name}} : {{attr.value}}
                    <span class="attr-link"> | </span>
                  </span>
              </div>
            </template>
          </el-table-column>
          <el-table-column
            :label="$t('table.ListingIDAndSKU')"
            align="left"
            min-width="300"
            prop="toGoodsId"
          >
            <template slot-scope="{row}">
              {{row.goodsId}}{{row.sku ? `(${row.sku})` : ''}}
            </template>
          </el-table-column>
          <!-- <m-l-code-column></m-l-code-column> -->
          <el-table-column
            label="产品标"
            align="center"
            width="200"
            prop="fromGoodsId"
          >
            <template v-slot="{row}">
              <template v-if="row.fromGoodsIsTB">
                {{$t('shipment.Not labeled')}}
              </template>
              <template v-else>
                {{row.fromInventoryId || '-'}}
              </template>
            </template>
          </el-table-column>
       <!--   <m-l-code-column prop="fromInventoryId" :label="$t('table.调出MLCode')"></m-l-code-column> -->

         <!-- <el-table-column
            prop="inventoryLocation"
            align="center"
            :label="$t('table.inventoryLocation.存放库位')"
            min-width="160"
          >
            <template v-slot="{row}">
              <template v-if="row.inventoryLocationStr === ''">
                -
              </template>
              <template v-else>
                {{row.inventoryLocationStr}}
              </template>
            </template>
          </el-table-column> -->

          <el-table-column
            :label="$t('table.预计从中转送仓调出')"
            align="center"
            width="200"
            prop="boxInfo"
          >
            <template v-slot="{row}">
              <div
                v-for="(item,index) in row.boxInfo"
                :key="index"
              >
                {{$t('table.num/箱',{num: item.goodsNumInBox})}} × {{item.editNum}}
              </div>
            </template>
          </el-table-column>
         <!-- <template v-if="data.labelOrder.status === 2">
            <el-table-column
              :label="$t('table.实际调出数量')"
              align="center"
              width="200"
              prop="rlGoodsNum"
            >
              <template v-slot="{row}">
                <span :class="row.rlGoodsNum === row.exGoodsNum ? '' : 'font-red'">{{row.rlGoodsNum}}</span>
              </template>
            </el-table-column>
          </template> -->

          <el-table-column
            :label="$t('table.预计送仓商品总数量')"
            align="center"
            width="200"
            prop="exGoodsNum"
          >
          </el-table-column>
      <!--    <template v-if="data.labelOrder.status === 2">
            <el-table-column
              :label="$t('table.实际送仓商品总数量')"
              align="center"
              width="200"
              prop="totalRlGoodsNum"
            >
              <template v-slot="{row}">
                <span :class="row.totalRlGoodsNum === row.needDistributionNum ? '' : 'font-red'">{{row.totalRlGoodsNum}}</span>
              </template>
            </el-table-column>
          </template> -->
          <el-table-column
            :label="$t('table.实际中转送仓数量')"
            align="center"
            width="200"
            prop="rlGoodsNum"
            v-if="!data.labelOrder || data.labelOrder.status === 2"
          >
            <template v-slot="{row}">
              <template v-if="data.status !== 1">
                <span :class="[row.rlGoodsNum !== row.exGoodsNum ? 'font-red' : '']">{{row.rlGoodsNum}}</span>
              </template>
              <template v-else>
                <template v-if="!data.labelOrder || data.labelOrder.status === 2">
                  <el-input-number
                    v-model="row.rlGoodsNum"
                    :placeholder="$t('common.pleaseFillIn')"
                    :min="0"
                    :precision="0"
                  ></el-input-number>
                </template>
                <template v-else>
                  -
                </template>

              </template>
            </template>
          </el-table-column>
          <template v-if="data.status === 1 && (!data.labelOrder || data.labelOrder.status === 2)">
            <el-table-column
              :label="$t('table.operate')"
              align="center"
              width="100"
            >
              <template v-slot="{row}">
                <el-button :type="row.save ? 'warning' : 'primary'" @click="saveMiddleGoods(row)">
                  {{ $t('common.save') }}
                </el-button>
              </template>
            </el-table-column>
          </template>

        </el-table>
      </div>

      <div class="mgt10" style="font-size: 13px" v-if="data.status === 1">
        <div class="font-red">{{ $t('middle.如若实际中转送仓商品数量与预计中转送仓数量有差异，请先与用户沟通确认') }}</div>
        <div class="font-grey">{{ $t('middle.单独保存SKU后，当前工单仍会是待拣货工单，请通过底部「确认已拣货」按钮确认拣货完成') }}</div>
      </div>

    </div>


    <div class="remark">
      <h4>{{$t('shipment.step4Text10')}}：</h4>
      <el-input type="textarea" style="width: 1500px" :placeholder="$t('shipment.step4Text11')" v-model="data.remark"></el-input>
    </div>
  </div>
</template>

<script>

import {saveMiddleGoodsNum} from "@/api/middleWork";
import {jumpLabelOrderInfo} from "@/utils/jumpView";
import {getMiddleSendTypeStr, getMiddleStatus} from "@/utils/MiddleWork";
import {getLabelStatusStr} from "@/utils/labelOrder";
// import MLCodeColumn from "@/views/stock/components/MLCodeColumn.vue";
import LabelOrderAlert from "@/views/labelOrder/components/LabelOrderAlert.vue";

export default {
  name: 'MiddleInfoView',
  components: {LabelOrderAlert,},
  props:{
    data: {
      type: Object,
      required: true,
    },
    straightGoods: {
      type: Array,
      required: true,
    },
    GoodsList: {
      type: Array,
      required: true,
    },
    distributionGoodsList:{
      type: Array,
      required: true,
    },
    // 硬件模式
    HWMode:{
      type: Boolean,
      default: false,
    }
  },
  data(){
    return {
       exFee: [{'exTotalFee':0,'exTotalLabelFee':0,'exTransferFee':0}],
    }
  },
  methods: {
    getMiddleSendTypeStr,
    getLabelStatusStr,
    getMiddleStatus,
    jumpLabelOrderInfo,
    objectSpanMethod1({ row, column, rowIndex, columnIndex }) {
      const mergeCell = this.mergeCell1()
      if(mergeCell[column.property]){
        if(mergeCell[column.property][rowIndex]) {
          return [mergeCell[column.property][rowIndex], 1]
        } else {
          // 如果为0则为需要合并的行
          return [0, 0];
        }
      }
    },
    mergeCell1(){
      const mergeObj = {};
      // 根据suitId合并的字段
      const mergeFieldArr = [
        'image',
        'title',
        'toGoodsId',
        'needDistributionNum',
        'operate',
        'totalRlGoodsNum',
        'inventoryId',
        'inventoryLocation',
      ];

      mergeFieldArr.forEach(key=>{
        mergeObj[key] = [1];
      })

      let mergeFieldKey = 0;
      this.GoodsList.forEach((item,index)=>{
        // 第一列数据不处理
        if(index === 0){
          return;
        }
        // 根据suitId 合并
        if(item.toSuitListId && item.toSuitListId === this.GoodsList[index - 1].toSuitListId){
          mergeFieldArr.forEach(key=>{
            mergeObj[key][mergeFieldKey] += 1;
            mergeObj[key].push(0); // 添加一个0 站位
          })
        }else{
          mergeFieldKey = index; // 记录当前行
          mergeFieldArr.forEach(key=>{
            mergeObj[key].push(1); // 添加一个1
          })
        }
      })

      return mergeObj;
    },
    // 保存对应的数量
    saveMiddleGoods(row){
      if(!row.rlGoodsNum){
        row.rlGoodsNum = 0
      }
      const data = {
        id: row.id,
        rlGoodsNum: row.rlGoodsNum
      }
      saveMiddleGoodsNum(data)
        .then(res=>{
          if(res.error === 0){
            row.save = true
            this.$successMessage(res.message)
          }else{
            this.$errorMessage(res.message)
          }
        })
    },
  }
}

</script>


<style scoped lang="scss">
.wrap {
  padding: 30px 30px;
  .header{
    //display: flex;
    //justify-content: space-between;
  }
  .content{
    padding: 20px 0 0;
  }
  .header-card{
    font-size: 14px;
    background-color: rgba(242, 242, 242, 1);
    p{
      margin: 10px 0;
      padding: 0;
    }
    .font-bold{
      font-weight: bold;
    }
    .true-number{
      color: #FF0000;
      font-weight: 600;
    }
  }
}
.goods-table{
  width: 1500px;
  .goods-title{
    font-size: 14px;
  }
  .goods-attr{
    font-size: 13px;
    color: #7F7F7F;
  }
}
.table-tips{

}

.header-card{
  position: relative;
  .button{
    position: absolute;
    display: flex;
    flex-direction: column;
    right: 20px;
    top: 30px;
  }
}
.box-content{
  font-size: 15px;
}
</style>
